<template>
  <div class="tiktok-write-off">
    <div class="banner " v-if="rotation && rotation.length !== 0">
      <van-swipe :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(item, i) in rotation" :key="i">
          <img :src="item.url" @click="banner_link(item.jump_h5)" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="box">
      <input type="text" v-model="code" placeholder="请输入抖音券码（在抖音订单中复制）" />
      <van-button :loading="loading" :disabled="loading" loading-text="查看中..." class="button" @click="check(status)"
        v-if="status == 1">下一步：查看核销权益</van-button>
      <van-button class="button" :loading="loading" :disabled="loading" @click="check(status)" v-if="status == 2"
        loading-text="核销中...">确定核销</van-button>
      <button class="button disabled" v-if="status == 3">恭喜您核销成功</button>
    </div>
    <div class="addr" @click="showAddressFun" v-if="!show_address && status !== 1 && is_show_address">
      <i class="fa fa-map-marker"></i>
      <p v-if="realname" style="flex: 1; text-align: left; padding: 0 0.625rem;">
        收件人:{{ realname }} {{ mobile }}
        <br />
        <span>{{ address }}</span>
      </p>
      <p v-if="!realname" style="flex: 1 1 0%; text-align: left; padding: 0px 0.625rem;">请点击选择地址</p>
      <i v-if="realname" class="fa fa-angle-right"></i>
    </div>

    <equity v-if="status !== 1" :datas="right" :status="status" ref="equityRoot"></equity>

    <div class="explain" v-if="introduce">
      <p class="tips">核销说明</p>
      <div v-html="introduce" style="text-align: left;"></div>
    </div>

    <div class="right-area">
      <i class="iconfont icon-wodekefu" @click="showKefu = true"></i>
      <i class="iconfont icon-icon_dingdan_1" @click="goto"></i>
    </div>

    <yz-address-list v-model="showAddress" v-on:confirm="confirmSelectAddress"></yz-address-list>


    <yz-service v-model="showKefu" :url='cservice' :mobile='service_mobile' :qr="service_QRcode"></yz-service>
    <!-- 自定义图标 -->
    <van-popup v-model="domain_show" closeable close-icon="close" position="bottom" :style="{ height: '100%' }"
      @opened="checkData" @closed="closed_domain">
      <div>
        <div v-if="show_domain">
          <div class="domain-title">新增/绑定站点</div>
          <div classwrapper v-if="!isBinding">
            <div class="change">
              <div class="btn blue" @click="toChange">绑定已有站点</div>
              <p>如果您已经部署安装过当前商城，请绑定已有站点</p>
              <p class="content-box-tips">注：您只能绑定一个站点，请勿绑定他人站点！</p>
            </div>

            <div class="new">
              <div class="btn red" @click="toChange('new')">创建新站点</div>
              <p>如果您未部署安装当前商城，请创建站点！</p>
            </div>
          </div>
          <div class="change" v-else>
            您已绑定过域名
          </div>
          <div class="service-box" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']"><span>如有疑问请联系客服</span> <i  class="iconfont icon-kefu"></i></div>
        </div>
        <div v-else>
          <div class="domain-title">{{ isNew == 1 ? '绑定站点' : '创建新站点' }}</div>
          <div class="content-wrapper">
            <van-form>
              <van-field v-if="isNew" v-model.trim="form.name" name="公司/个人名称" label="公司/个人名称" placeholder="请填写公司/个人名称"
                :rules="[{ required: true, message: '请填写公司/个人名称' }]" />
              <van-field v-model.trim="form.domain" name="域名" label="域名" placeholder="请填写域名"
                :rules="[{ required: true, message: '请填写域名' }]" />
              <p class="content-wrapper-tips">已部署的当前商城系统域名，如：{{ domain }}</p>
              <p class="content-wrapper-tips red">注：您只能绑定一个站点，请勿绑定他人站点！</p>
              <van-field v-model.trim="form.mobile" name="手机号" label="手机号" placeholder="请填写手机号"
                :rules="[{ required: true, message: '请填写手机号' }]" />
              <van-field v-model.trim="authcode" center clearable label="短信验证码" placeholder="请输入短信验证码">
                <van-button slot="button" size="small" round plain type="info" @click="sureIdentify"
                  v-show="this.count <= 0">
                  获取验证码
                </van-button>
                <van-button slot="button" size="small" round plain type="info" disabled v-show="this.count > 0">
                  {{ count }}秒后重新获取
                </van-button>
              </van-field>

            </van-form>
            <div class="btn" @click="toSave">{{ isNew ? '创建站点' : '保存' }}</div>
            <p class="blue-txt" @click="changeNew">{{ isNew ? '绑定已有站点' : '创建新的站点' }}</p>
          </div>
        </div>

      </div>
    </van-popup>


    <van-popup v-model="diyforms_show" closeable close-icon="close" position="bottom" :style="{ height: '100%' }"
      @open="diyformData">
      <div class="enroll-content" v-if="activity">
        <div class="domain-title">立即报名</div>
        <div class="top">
          <div class="list-row">
            <div class="left-image">
              <img :src="activity.thumb">
            </div>
            <div class="right-info">
              <p class="title">{{ activity.title }}</p>
              <p class="money"><span class="price" v-if="activity.cash > 0.00"><b>{{ $i18n.t('money') }}</b>{{
                activity.cash }}</span><span class="cash" v-if="activity.cash <= 0.00">免费活动</span></p>
              <span class="already-registered">已报名: {{ activity_count }}/{{ activity.limit }}</span>
            </div>
          </div>
          <div class="address"><i class="iconfont icon-zx_map_locate2"></i> {{ city.substr(0, 2) }}{{ activity.address }}
          </div>
          <div class="time"><i class="iconfont icon-qhm_record"></i> <span>
              {{ timestampToTime(activity.start_time) }}</span><span> 至 {{ timestampToTime(activity.end_time) }}</span>
          </div>
        </div>
        <div class="deduct">
          <div>
            <div v-for="(item, index) in order_deductions" class="model" :key="index">
              <span>可用{{ item.coin }}{{ item.name }}抵扣{{ item.amount }}元</span>
              <van-switch v-model="item.checked" @change="switchChange(item.code, item.checked)" size="28px"
                active-color="#f15353" inactive-color="#fff" />
            </div>
          </div>
          <div class="total"><span>合计</span><span class="right">{{ $i18n.t('money') }}{{ total_price }}</span></div>
        </div>
        <diyfroms v-if="info" modeType="activity" plugin="tiktok"
          :form_id="form_id" :desThumb="false" :payStatus="payStatus"
          :applyStatus="applyStatus" :activityId="activityId" type="enroll" :info="info" @close_popup="close_popup"
          ></diyfroms>
      </div>
    </van-popup>
  </div>
</template>

<script>
import index_controller from './index_controller';
export default index_controller;
</script>

<style scoped lang="scss">
  .enroll-content {
    .top {
      margin: 0.7rem 0.8rem;
      padding: 0.75rem;
      border-radius: 0.5rem;
      background-color: #fff;

      .list-row {
        display: flex;
        border-bottom: 0.1rem dashed #D6D6DC;
        padding-bottom: 0.85rem;
      }

      .left-image {
        width: 8rem;
        height: 5rem;
        display: flex;

        img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
        }
      }

      .right-info {
        margin-left: 0.7rem;
        display: flex;
        align-items: baseline;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .title {
          margin-bottom: 5px;
          display: -webkit-box;
          overflow: hidden;
          white-space: normal;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 2;

          /* autoprefixer: off */
          -webkit-box-orient: vertical;
          text-align: left;
          font-size: 0.85rem;
          font-weight: bold;
          color: #00001C;
          margin: 0.1rem 0;
        }


        .money {
          display: flex;
          justify-content: space-between;
          width: 100%;

          .cash {
            font-size: 0.9rem;
            font-weight: bold;
            color: #F15353;
          }

          .price {
            text-align: left;
            color: #f15353;
            font-size: 0.85rem;
            font-weight: bold;
            color: #F15353;

          }

          span {
            b {
              color: #f15353;
            }
          }
        }

        .already-registered {
          font-size: 0.75rem;
          font-weight: 400;
          color: #6E6E79;
        }
      }

      .address {
        font-size: 0.75rem;
        font-weight: 400;
        color: #6E6E79;
        margin: 0.7rem 0;
        text-align: left;
        display: flex;
        align-items: center;

        .iconfont {
          margin-right: 0.3rem;
        }
      }

      .time {
        font-size: 0.75rem;
        font-weight: 400;
        color: #6E6E79;
        display: flex;
        align-items: center;
        .icon-qhm_record {
          color: #6E6E79;
          margin-right: 0.2rem;
        }
      }
    }

    .count {
      margin-top: 1rem;

      .count-top {
        padding: 1rem 0;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .limit {
          color: #999;
          font-size: 12px;
        }

        .count-num {
          display: flex;

          span {
            width: 2rem;
            height: 2rem;
            display: flex;
            background-color: #f7f8fa;
            align-items: center;
            justify-content: center;
            border: solid 1px #ccc;
          }

          input {
            outline: none;
            width: 2rem;
            height: 2rem;
            background-color: #f7f8fa;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            border: solid 1px #ccc;
            border-left: none;
            border-right: none;
          }
        }
      }

      .count-bottom {
        background-color: #fff;
        padding: 0.8rem;
        border-top: dashed 1px #ccc;
        display: flex;
        justify-content: space-between;

        .price {
          color: #eb5648;
          font-size: 16px;
        }
      }
    }

    .input {
      margin-top: 1rem;
      background-color: #fff;
      padding-bottom: 0.8rem;

      b {
        color: rgba(232, 78, 64, 1);
        margin-right: 2px;
      }

      .yd-cell-item {
        padding-left: 0.8rem;
        border-bottom: solid 1px #ccc;
      }
      .my_img {
        padding-left: 0.8rem;
        background: #fff;

        .title {
          text-align: left;
        }

        .img_uploader {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          margin-top: 10px;

          .photoBox {
            position: relative;
            width: 4.5rem;
            height: 4.5rem;
            border: 1px dashed #c0ccda;
            margin-right: 0.2rem;
            margin-left: 0.2rem;
            margin-bottom: 0.2rem;

            img {
              width: 100%;
              height: 100%;
            }

            i {
              width: 1.2rem;
              height: 1.2rem;
              position: absolute;
              top: 0.1rem;
              right: 0.1rem;
              background: url("../../assets/images/close_iocn.png");
              background-size: 100%;
            }
          }

          .van-uploader {
            width: 4.5rem;
            height: 4.5rem;
            overflow: hidden;
            background: #f2f2f2;
            margin-left: 0.2rem;
            margin-right: 0.875rem;
            margin-bottom: 0.9375rem;

            .van-icon {
              font-size: 24px;
              line-height: 4.5rem;
              color: #666;
            }
          }
        }
      }
    }

    .button {
      width: 80%;
      background-color: rgba(232, 78, 64, 1);
      padding: 1rem 0;
      text-align: center;
      margin: 0 auto;
      margin-top: 1rem;
      margin-bottom: 2rem;

      span {
        color: #fff;
      }
    }

    .pay-method {
      padding: 1rem 0;
      padding-bottom: 0;

      .title {
        padding-left: 0.8rem;
        text-align: left;

        b {
          color: rgba(232, 78, 64, 1);
          margin-right: 2px;
          opacity: 0;
        }
      }

      ul {
        li:first-child {
          margin-top: 1rem;
        }

        li {
          width: 21.5625rem;
          padding: 0 0.625rem;
          display: -ms-flexbox;
          display: flex;
          font-size: 16px;
          justify-content: flex-start;
          align-items: center;
          height: 2.625rem;
          border-radius: 0.375rem;
          background: #fff;
          border: solid 0.0625rem #dedede;
          margin: 0 auto;
          margin-bottom: 1rem;

          .icon_bg {
            width: 2.25rem;
            height: 1.5rem;
            border-radius: 0.1875rem;
            line-height: 1.5rem;
            margin-right: 0.625rem;

            i {
              color: #fff;
              font-size: 1.5rem;
            }
          }
        }
      }
    }

    .deduct {
      margin: 0.7rem 0.8rem;
      padding: 0.9rem 0.75rem;
      border-radius: 0.5rem;
      background-color: #fff;

      .model {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
      }

      .total {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .right {
        color: #f15353;
      }
    }

    .diyfroms-style {
      padding: 0 0.75rem;
    }
  }
.content-wrapper {

  .btn {
    margin: 40px auto 20px auto;
    color: #fff;
    width: 18.75rem;
    height: 2.25rem;
    line-height: 2.25rem;
    background-image: linear-gradient(0deg, #377aff 0%, #679aff 100%);
    border-radius: 20px;
  }

  .blue-txt {
    text-align: center;
    color: #377aff;
  }

  .content-wrapper-tips {
    color: #797979;
    font-size: 12px;
    text-align: left;
    padding: 0.5rem 1rem;
    background: #fff;
  }

  .red {
    color: #f14e4e;
  }
}

.domain-title {
  text-align: center;
  color: #666;
  font-weight: 700;
  font-size: 14px;
  padding-top: 1.4063rem;
  padding-bottom: 2rem;
}


.change,
.new {
  padding: 2rem 1rem;
}

.change {
  margin-top: 1rem;
}

.btn {
  width: 9rem;
  margin: 1rem auto;
  height: 3rem;
  line-height: 3rem;
  font-size: 16px;
  background-color: #4ba4fd;
  color: #fff;
  border-radius: 10px;
}

.red {
  background-color: #ff5f5d;
}

.content-box-tips {
  color: #ff5f5d;
}



.service-box {
  position: fixed;
  width: 100%;
  bottom: 1rem;
  display: flex;
  justify-content: center;

  .icon-kefu {
    color: #ff5f5d;
  }

  &.pcStyle {
    width: 375px;
  }
}

.tiktok-write-off {

  // position: relative;
  .addr {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: center;
    background: #fff;
    padding: 0.875rem;
    margin: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    overflow: hidden;

    .icon {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      align-items: center;
      background: #fff;

      .fa-map-marker {
        line-height: 1.5rem;
        margin-right: 0.625rem;
        font-size: 22px;
        color: #333;
        padding-right: 0.5rem;
      }

      .fa-angle-right {
        line-height: 1.5rem;
        font-size: 24px;
        color: #c9c9c9;
      }

      p {
        flex: 6;
        text-align: justify;
        font-weight: bold;
        padding-right: 1rem;
        color: #333;
        font-size: 16px;

        span {
          font-weight: normal;
          color: #666;
          display: -webkit-box;
          font-size: 14px;
          margin-top: 0.375rem;
        }
      }
    }
  }

  .disabled {
    opacity: 0.6 !important;
  }

  .right-area {
    // position: absolute;
    position: fixed;
    right: 0.7188rem;
    bottom: 6.25rem;
    display: flex;
    flex-direction: column;
  }

  .icon-wodekefu {
    font-size: 1.75rem;
  }

  .icon-wodekefu,
  .icon-icon_dingdan_1 {
    width: 2.75rem;
    height: 2.75rem;
    line-height: 2.75rem;
    background: #000000;
    color: #fff;
    border-radius: 100px;
    opacity: 0.7;
  }

  .icon-icon_dingdan_1 {
    font-size: 1.5625rem;
    margin-top: 1.5625rem;
  }

  .tips {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.9375rem;
  }

  .explain {
    background: #FFFFFF;
    border-radius: 0.625rem;
    padding: 1.25rem 0.75rem;
    margin: 0.625rem 0.75rem;
  }

  .button {
    width: 100%;
    color: #fff;
    height: 2.5rem;
    text-align: center;
    background: var(--themeBaseColor);
    border-radius: 1.375rem;
    border: none;
  }

  input::-webkit-input-placeholder {
    text-align: center;
  }

  input {
    width: 100%;
    border: 1px solid #D6D6DC;
    border-radius: 0.625rem;
    padding: 1.0625rem;
    margin-bottom: 1.1875rem;
    text-align: center;
  }

  .box {
    margin: 0.625rem 0.75rem;
    padding: 0.9375rem 0.9375rem 1.1875rem;
    border-radius: 0.625rem;
    background: #fff;
  }

  .banner {
    border-radius: 0.5rem;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;

    }
  }
}
</style>
